<!-- 详情 -->
<template>
  <div class="drawer-layout">
    <el-drawer
      :title="detailTitle"
      :visible.sync="drawer"
      @closed="closedinvitation"
      size="85%"
      :wrapperClosable="false"
    >
      <div class="layout">
        <!-- <el-form label-position="left" :inline="true" size="small"> -->
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="活动基本配置" name="first">
            <el-form
              ref="basic"
              label-position="left"
              :inline="true"
              :model="basic"
              size="small"
              :rules="basicrules"
            >
              <div class="blockquote-box">基本信息</div>
              <div class="form-box">
                <el-form-item
                  label="活动名称"
                  prop="award_name"
                  class="form-box-item"
                >
                  <el-input
                    clearable
                    maxlength="20"
                    show-word-limit
                    placeholder="请输入活动名称"
                    v-model="basic.award_name"
                  >
                  </el-input>
                </el-form-item>
                <el-form-item
                  label="活动时间"
                  prop="basicTime"
                  class="form-box-item"
                >
                  <el-date-picker
                    clearable
                    value-format="yyyy-MM-dd"
                    @change="basicTimeChange"
                    v-model="basicTime"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                  >
                  </el-date-picker>
                </el-form-item>
                <el-form-item
                  label="活动状态"
                  prop="status"
                  class="form-box-item"
                >
                  <el-select v-model="basic.status" placeholder="请选择状态">
                    <el-option
                      v-for="item in status"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
              <div class="blockquote-box">规则信息</div>
              <div class="form-box">
                <el-form-item
                  label="总抽奖限制"
                  prop="user_lottery_num"
                  class="form-box-item"
                >
                  <el-input
                    @focus="Focus(basic, 'user_lottery_num')"
                    @blur="Blur(basic, 'user_lottery_num')"
                    clearable
                    maxlength="5"
                    show-word-limit
                    placeholder="请输入用户总可抽奖限制，0为不限制"
                    v-model="basic.user_lottery_num"
                  >
                  </el-input>
                  <div class="form-tip">
                    限制用户参与活动 总-抽奖次数 0为不限制
                  </div>
                </el-form-item>
                <el-form-item
                  label="日抽奖限制"
                  prop="user_lottery_num"
                  class="form-box-item"
                >
                  <el-input
                    maxlength="5"
                    show-word-limit
                    @focus="Focus(basic, 'user_days_lottery_num')"
                    @blur="Blur(basic, 'user_days_lottery_num')"
                    clearable
                    placeholder="请输入用户日可抽奖限制，0为不限制"
                    v-model="basic.user_days_lottery_num"
                  >
                  </el-input>
                  <div class="form-tip">
                    限制用户参与活动 日-抽奖次数 0为不限制
                  </div>
                </el-form-item>
                <el-form-item
                  label="额外次数"
                  prop="extraTimes"
                  class="form-box-item"
                >
                  <!-- 额外次数：选中对应显示签到次数和会员卡次数 -->
                  <el-checkbox-group v-model="extraTimes" size="small">
                    <el-checkbox
                      label="签到渠道"
                      name="extraTimes"
                      border
                    ></el-checkbox>
                    <el-checkbox
                      label="会员卡渠道"
                      name="extraTimes"
                      border
                    ></el-checkbox>
                  </el-checkbox-group>
                  <div class="form-tip">
                    是否开放除活动外获取的<span class="tip-key">额外</span
                    >抽奖次数
                  </div>
                </el-form-item>
                <div>
                  <el-form-item
                    v-if="extraTimes.includes('签到渠道')"
                    label="签到次数"
                    prop="is_use_cart_num"
                    class="form-box-item"
                  >
                    <el-input
                      maxlength="5"
                      show-word-limit
                      clearable
                      placeholder="请输入最多可用次数"
                      v-model="basic.is_use_cart_num"
                    >
                    </el-input>
                    <div class="form-tip">
                      可<span class="tip-key">额外</span>使用签到赠送的最大次数
                    </div>
                  </el-form-item>
                  <el-form-item
                    v-if="extraTimes.includes('会员卡渠道')"
                    label="会员卡次数"
                    prop="is_use_sign_num"
                    class="form-box-item"
                  >
                    <el-input
                      maxlength="5"
                      show-word-limit
                      clearable
                      placeholder="请输入最多可用次数"
                      v-model="basic.is_use_sign_num"
                    >
                    </el-input>
                    <div class="form-tip">
                      可<span class="tip-key">额外</span
                      >使用会员卡赠送的最大次数
                    </div>
                  </el-form-item>
                </div>
              </div>
            </el-form>
            <el-divider></el-divider>
            <div class="button-box">
              <el-button
                @click="basic_information('basic', 'second')"
                class="next-button"
                >下一步 <i class="el-icon-caret-right el-icon--right"></i
              ></el-button>
            </div>
          </el-tab-pane>
          <el-tab-pane label="适用范围" name="second">
            <el-form
              label-position="left"
              :inline="true"
              :model="range"
              size="small"
              :rules="rangerules"
            >
              <div class="blockquote-box">适用范围</div>
              <div class="form-box">
                <el-form-item label="适用区域" required class="form-box-item">
                  <el-cascader
                    @change="regionChangeWay"
                    v-model="region"
                    style="width: 100%"
                    :options="regionList"
                    collapse-tags
                    :props="{
                      multiple: true,
                      value: 'id',
                      label: 'name',
                      children: 'children',
                      checkStrictly: true,
                    }"
                    clearable
                  ></el-cascader>
                </el-form-item>
                <el-form-item label="用户分组" required class="form-box-item">
                  <el-select
                    @change="selectChangeWay(grouping, 'user_group')"
                    v-model="grouping"
                    multiple
                    clearable
                    collapse-tags
                    placeholder="请选用户分组"
                  >
                    <el-option
                      v-for="item in groupingList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="用户等级" required class="form-box-item">
                  <el-select
                    @change="selectChangeWay(grouping, 'user_level')"
                    v-model="grade"
                    multiple
                    clearable
                    collapse-tags
                    placeholder="请选用户等级"
                  >
                    <el-option
                      v-for="item in gradeList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="用户标签" required class="form-box-item">
                  <el-select
                    clearable
                    @change="selectChangeWay(grouping, 'user_label')"
                    style="width: 100%"
                    v-model="label"
                    multiple
                    collapse-tags
                    placeholder="请选择标签"
                  >
                    <el-option-group
                      v-for="group in TagCategoryAll"
                      :key="group.category_name"
                      :label="group.category_name"
                    >
                      <el-option
                        v-for="item in group.child"
                        :key="item.id"
                        :label="item.tag_name"
                        :value="item.id"
                      >
                      </el-option>
                    </el-option-group>
                  </el-select>
                </el-form-item>
              </div>
              <div class="blockquote-box">可参与活动的用户</div>
              <div class="form-box">
                <div class="table-top">
                  <div class="table-top-left">
                    <div>所有用户：{{ rangeCanJoinUsertotal }}</div>
                    <div>黑名单用户：{{ joinblackList.length }}</div>
                    <div>重复用户：{{ rangeHasJoinUserTotal }}</div>
                  </div>
                  <div
                    class="table-top-right"
                    v-if="CanJoinUserList.length > 0"
                  >
                    <div>
                      <el-button
                        style="height: 30px"
                        type="primary"
                        @click="addConfig('黑名单')"
                        plain
                        size="small"
                        >配置黑名单</el-button
                      >
                    </div>
                    <div>
                      <el-button
                        style="height: 30px"
                        type="primary"
                        @click="addConfig('重复对象')"
                        plain
                        size="small"
                        >配置重复</el-button
                      >
                    </div>
                  </div>
                </div>
                <div>
                  <el-table
                    v-loading="rangeCanJoinUserLoading"
                    highlight-current-row
                    :data="CanJoinUserList"
                    :header-cell-style="{
                      'background-color': '#f3f8fe',
                      color: '#606266',
                      height: '50px',
                    }"
                    style="width: 100%"
                  >
                    <el-table-column
                      align="center"
                      prop="id"
                      label="用户id"
                    ></el-table-column>
                    <el-table-column
                      align="center"
                      prop="nickname"
                      label="用户昵称"
                    ></el-table-column>
                    <el-table-column
                      align="center"
                      prop="region"
                      label="用户区域"
                    >
                      <template slot-scope="scope">
                        {{
                          scope.row.province_name
                            ? scope.row.province_name
                            : "-"
                        }}
                        {{ scope.row.city_name ? scope.row.city_name : "-" }}
                      </template>
                    </el-table-column>
                    <el-table-column
                      width="200"
                      align="center"
                      prop="group"
                      label="用户群组"
                    >
                      <template slot-scope="scope">
                        <!-- 用户群组：提示多个群组需要用分隔符区分，‘空格’+‘/’,超过三个显示超过的数量 -->
                        <el-tooltip
                          class="item"
                          effect="dark"
                          :content="scope.row.group_name"
                          placement="top"
                        >
                          <div
                            v-if="scope.row.group_name"
                            style="display: flex; justify-content: center"
                          >
                            <div>{{ scope.row.group_name }}</div>
                          </div>
                        </el-tooltip>
                        <div v-if="!scope.row.group_name">-</div>
                      </template>
                    </el-table-column>
                    <el-table-column
                      width="200"
                      align="center"
                      prop="tag"
                      label="用户标签"
                    >
                      <template slot-scope="scope">
                        <el-tooltip
                          class="item"
                          effect="dark"
                          :content="scope.row.tag_name.join('/')"
                          placement="top"
                        >
                          <div
                            v-if="scope.row.tag_name.length !== 0"
                            style="display: flex; justify-content: center"
                          >
                            <div
                              v-if="index < 3"
                              v-for="(item, index) in scope.row.tag_name"
                              :key="index"
                            >
                              {{ item }} /
                            </div>
                            <div
                              v-if="scope.row.tag_name.length > 3"
                              class="table-num"
                            >
                              + {{ scope.row.tag_name.length }}
                            </div>
                          </div>
                        </el-tooltip>
                        <div v-if="scope.row.tag_name.length == 0">-</div>
                      </template>
                    </el-table-column>
                    <el-table-column
                      align="center"
                      prop="status"
                      label="参与活动状态"
                    ></el-table-column>
                    <el-table-column
                      fixed="right"
                      width="100"
                      prop="address"
                      label="操作"
                      align="center"
                    >
                      <template slot-scope="scope">
                        <el-button type="text" @click="joinblack(scope.row)">
                          加入黑名单
                        </el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                  <pagination
                    v-show="rangeCanJoinUsertotal > 0"
                    :total="rangeCanJoinUsertotal"
                    :page.sync="rangeCanJoinUserSearch.page"
                    :limit.sync="rangeCanJoinUserSearch.count"
                    @pagination="gettable"
                  />
                </div>
              </div>
            </el-form>
            <el-divider></el-divider>
            <div class="button-box">
              <el-button
                @click="activeName = 'first'"
                icon="el-icon-caret-left"
                class="next-button"
                >上一步</el-button
              >
              <el-button @click="activeName = 'third'" class="next-button"
                >下一步 <i class="el-icon-caret-right el-icon--right"></i
              ></el-button>
            </div>
          </el-tab-pane>
          <el-tab-pane label="活动任务配置" name="third">
            <el-alert
              style="margin-bottom: 20px"
              title="说明:"
              type="warning"
              :closable="false"
            >
              1.购买商品:此类型商品是需要现金购买的商品，支付方式包含:现金、余额、现金+积分、现金+提货券、现金+积分+提货券;
              <br />2.兑换商品:此类型商品是不需要现金购买的商品，支付方式包含:
              积分、提货券、提货券+积分;
              <br />3.实名认证:仅限活动当前没有完成实名认证的用户;
            </el-alert>
            <el-form
              label-position="left"
              :inline="true"
              :model="basic"
              size="small"
              :rules="basicrules"
            >
              <div class="form-box">
                <el-form-item label="抽奖任务" required class="form-box-item">
                  <el-checkbox-group
                    v-model="eventsForm.extraTimes"
                    size="small"
                  >
                    <el-checkbox
                      label="购买商品"
                      name="extraTimes"
                    ></el-checkbox>
                    <el-checkbox
                      label="兑换商品"
                      name="extraTimes"
                    ></el-checkbox>
                    <el-checkbox
                      label="完成实名认证"
                      name="extraTimes"
                    ></el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
              </div>
              <div v-if="eventsForm.extraTimes.includes('购买商品')">
                <div class="blockquote-box">购买商品规则</div>
                <div class="form-box">
                  <el-form-item
                    label="适用商品"
                    class="form-box-item"
                    :rules="
                      eventsForm.extraTimes.includes('购买商品')
                        ? [{ required: true, message: '请选择适用商品' }]
                        : []
                    "
                  >
                    <el-radio-group v-model="eventsForm.product">
                      <el-radio label="全部商品"></el-radio>
                      <el-radio label="仅平台商品"></el-radio>
                      <el-radio label="仅店铺商品"></el-radio>
                      <el-radio label="指定商品"></el-radio>
                    </el-radio-group>
                    <div
                      class="form-product"
                      v-if="eventsForm.product == '指定商品'"
                    >
                      <div>已选商品：0</div>
                      <el-button
                        type="text"
                        style="margin-left: 20px"
                        @click="addProductConfig('配置活动商品')"
                        >选择商品</el-button
                      >
                    </div>
                  </el-form-item>
                  <div>
                    <el-form-item
                      label="默认抽奖次数"
                      :rules="
                        eventsForm.extraTimes.includes('购买商品')
                          ? [
                              {
                                required: true,
                                message: '请输入默认抽奖次数次数',
                              },
                            ]
                          : []
                      "
                      class="form-box-item"
                    >
                      <el-input
                        placeholder="请输入默认抽奖次数"
                        v-model="eventsForm.totalPrizeRulesLimited"
                      >
                      </el-input>
                      <div class="form-tip">购买1个商品可获得的次数</div>
                    </el-form-item>
                    <el-form-item
                      label="默认限购数量"
                      :rules="
                        eventsForm.extraTimes.includes('购买商品')
                          ? [{ required: true, message: '请输入默认限购数量' }]
                          : []
                      "
                      class="form-box-item"
                    >
                      <el-input
                        placeholder="请输入默认限购数量"
                        v-model="eventsForm.totalPrizeRulesLimited"
                      >
                      </el-input>
                      <div class="form-tip">
                        每个用户可购买的商品数量，0为不限制
                      </div>
                    </el-form-item>
                  </div>
                </div>
              </div>
              <div v-if="eventsForm.extraTimes.includes('兑换商品')">
                <div class="blockquote-box">兑换商品规则</div>
                <div class="form-box">
                  <el-form-item
                    label="适用商品"
                    class="form-box-item"
                    :rules="
                      eventsForm.extraTimes.includes('兑换商品')
                        ? [{ required: true, message: '请选择适用商品' }]
                        : []
                    "
                  >
                    <el-radio-group v-model="eventsForm.product">
                      <el-radio label="全部商品"></el-radio>
                      <el-radio label="指定商品"></el-radio>
                    </el-radio-group>
                    <div
                      class="form-product"
                      v-if="eventsForm.product == '指定商品'"
                    >
                      <div>已选商品：0</div>
                      <el-button
                        type="text"
                        style="margin-left: 20px"
                        @click="addProductConfig('配置活动商品')"
                        >选择商品</el-button
                      >
                    </div>
                  </el-form-item>
                  <div>
                    <el-form-item
                      label="默认抽奖次数"
                      :rules="
                        eventsForm.extraTimes.includes('兑换商品')
                          ? [
                              {
                                required: true,
                                message: '请输入默认抽奖次数次数',
                              },
                            ]
                          : []
                      "
                      class="form-box-item"
                    >
                      <el-input
                        placeholder="请输入默认抽奖次数"
                        v-model="eventsForm.totalPrizeRulesLimited"
                      >
                      </el-input>
                      <div class="form-tip">兑换1个商品可获得的次数</div>
                    </el-form-item>
                    <el-form-item
                      label="默认兑换限制"
                      :rules="
                        eventsForm.extraTimes.includes('兑换商品')
                          ? [{ required: true, message: '请输入默认限购数量' }]
                          : []
                      "
                      class="form-box-item"
                    >
                      <el-input
                        placeholder="请输入默认兑换限制"
                        v-model="eventsForm.totalPrizeRulesLimited"
                      >
                      </el-input>
                      <div class="form-tip">
                        每个用户可兑换的商品数量，0为不限制
                      </div>
                    </el-form-item>
                  </div>
                </div>
              </div>
              <div v-if="eventsForm.extraTimes.includes('完成实名认证')">
                <div class="blockquote-box">完成实名认证规则</div>
                <div class="form-box">
                  <el-form-item
                    label="默认抽奖次数"
                    :rules="
                      eventsForm.extraTimes.includes('完成实名认证')
                        ? [{ required: true, message: '请输入默认抽奖次数' }]
                        : []
                    "
                    class="form-box-item"
                  >
                    <el-input
                      placeholder="请输入默认抽奖次数"
                      v-model="eventsForm.totalPrizeRulesLimited"
                    >
                    </el-input>
                    <div class="form-tip">完成实名认证可获得的次数</div>
                  </el-form-item>
                </div>
              </div>
            </el-form>
            <el-divider></el-divider>
            <div class="button-box">
              <el-button
                @click="activeName = 'third'"
                icon="el-icon-caret-left"
                class="next-button"
                >上一步</el-button
              >
              <el-button @click="activeName = 'fourth'" class="next-button"
                >下一步 <i class="el-icon-caret-right el-icon--right"></i
              ></el-button>
            </div>
          </el-tab-pane>
          <el-tab-pane label="奖池配置" name="fourth">
            <el-form
              label-position="left"
              :inline="true"
              :model="basic"
              size="small"
              :rules="basicrules"
            >
              <div class="blockquote-box">奖池配置</div>
              <div class="form-box">
                <div>
                  <el-form-item label="转盘设置" class="form-box-item">
                    <el-radio-group v-model="eventsForm.turntable">
                      <el-radio label="4">四个转盘</el-radio>
                      <el-radio label="6">六个转盘</el-radio>
                      <el-radio label="8">八个转盘</el-radio>
                      <el-radio label="10">十个转盘</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </div>
                <div>
                  <el-form-item label="奖池设置" class="form-box-item">
                    <el-radio-group v-model="eventsForm.prizepool">
                      <el-radio label="默认奖池">默认奖池</el-radio>
                      <el-radio label="自定义奖池">自定义奖池</el-radio>
                    </el-radio-group>
                    <div class="Instructions">
                      <div>说明:</div>
                      <div>
                        1.默认奖池:此类型是指活动信息中添加的适用对象，所有对象统一使用一个奖品池，即同一个抽奖转盘;
                      </div>
                      <div>
                        2.自定义奖池:此类型是指活动信息中添加的适用对象，根据适用对象不同的消费次数、消费金额设置不同的奖品池和抽奖转盘;
                      </div>
                    </div>
                  </el-form-item>
                </div>
              </div>
              <div
                v-if="eventsForm.prizepool == '自定义奖池'"
                class="blockquote-box"
              >
                奖池条件配置
              </div>
              <div class="form-box">
                <div v-if="eventsForm.prizepool == '自定义奖池'">
                  <el-form-item label="配置条件" class="form-box-item">
                    <el-button
                      type="primary"
                      style="height: 30px"
                      @click="addProductConfig('配置奖池商品')"
                      >配置指定商品</el-button
                    >
                  </el-form-item>
                </div>

                <div>
                  <el-form-item
                    label="奖池条件"
                    required
                    class="form-box-item"
                    v-if="eventsForm.prizepool == '自定义奖池'"
                  >
                    <el-input
                      v-model="eventsForm.minprize"
                      placeholder="请输入最低消费区间"
                      style="width: 150px"
                    ></el-input>
                    -
                    <el-input
                      v-model="eventsForm.maxprize"
                      placeholder="请输入最高消费区间"
                      style="width: 150px"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="奖品设置" required class="form-box-item">
                    <el-button
                      type="text"
                      @click="
                        dialogFormVisible = true;
                        dialogtitle = '添加奖品';
                      "
                      >添加奖品</el-button
                    >
                    <span style="margin-left: 10px"
                      >( {{ eventsForm.prizeturntable }} /
                      {{ eventsForm.turntable }} )</span
                    >
                  </el-form-item>

                  <div>
                    <el-table
                      v-loading="loading"
                      highlight-current-row
                      :data="tablevalue.dataList"
                      :header-cell-style="{
                        'background-color': '#f3f8fe',
                        color: '#606266',
                        height: '50px',
                      }"
                      style="width: 100%"
                    >
                      <el-table-column
                        align="center"
                        prop="name"
                        label="奖品名称"
                      ></el-table-column>
                      <el-table-column
                        align="center"
                        prop="region"
                        label="奖品类型"
                      ></el-table-column>
                      <el-table-column
                        align="center"
                        prop="image"
                        label="奖品图片"
                      >
                        <template slot-scope="scope">
                          <el-image
                            :src="scope.row.image"
                            style="width: 50px; height: 50px"
                          />
                        </template>
                      </el-table-column>
                      <el-table-column
                        align="center"
                        prop="region"
                        label="发放数量"
                      ></el-table-column>
                      <el-table-column
                        align="center"
                        prop="region"
                        label="奖品总数"
                      ></el-table-column>
                      <el-table-column
                        align="center"
                        prop="region"
                        label="人/总中奖次数"
                      ></el-table-column>
                      <el-table-column
                        align="center"
                        prop="region"
                        label="人/日中奖次数"
                      ></el-table-column>
                      <el-table-column
                        fixed="right"
                        width="100"
                        prop="address"
                        label="操作"
                        align="center"
                      >
                        <template slot-scope="scope">
                          <el-button
                            type="text"
                            @click="
                              dialogFormVisible = true;
                              dialogtitle = '奖品详情';
                            "
                          >
                            编辑
                          </el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
                </div>
              </div>
            </el-form>
            <el-divider></el-divider>
            <div class="button-box">
              <el-button
                @click="activeName = 'second'"
                icon="el-icon-caret-left"
                class="next-button"
                >上一步</el-button
              >
              <el-button @click="activeName = 'fifth'" class="next-button"
                >下一步 <i class="el-icon-caret-right el-icon--right"></i
              ></el-button>
            </div>
          </el-tab-pane>
          <el-tab-pane label="活动说明" name="fifth">
            <el-form
              label-position="left"
              :inline="true"
              :model="basic"
              size="small"
              :rules="basicrules"
            >
              <div class="blockquote-box">活动说明</div>
              <div class="form-box">
                <el-form-item label="活动说明" required class="form-box-item">
                  <tinymce-editor v-model="eventsForm.content" width="100%" />
                </el-form-item>
              </div>
            </el-form>
            <el-divider></el-divider>
            <div class="button-box">
              <el-button
                @click="activeName = 'fourth'"
                icon="el-icon-caret-left"
                class="next-button"
                >上一步</el-button
              >
              <el-button class="next-button">保存</el-button>
            </div>
          </el-tab-pane>
        </el-tabs>
        <!-- </el-form> -->
      </div>
    </el-drawer>
    <!-- 配置抽屉 -->
    <config
      v-if="ifShowConfig"
      :data="dataListConfig"
      :ConfigTitle="ConfigTitle"
    />
    <productConfig
      v-if="ifShowProductConfig"
      :productConfigTitle="productConfigTitle"
    ></productConfig>
    <el-dialog :title="dialogtitle" :visible.sync="dialogFormVisible">
      <div>
        <el-form :model="form">
          <el-form-item label="奖品名称" required class="form-box-item">
            <!-- 搜索下拉框 -->
            <el-select
              v-model="eventsForm.name"
              filterable
              placeholder="请选择"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="奖品类型" required class="form-box-item">
            <el-radio-group v-model="eventsForm.prizepool">
              <el-radio label="0">积分</el-radio>
              <el-radio label="1">余额</el-radio>
              <el-radio label="2">提货券</el-radio>
              <el-radio label="3">积分转换卡</el-radio>
              <el-radio label="4">未中奖</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="赠送数量" required class="form-box-item">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="奖品总量" required class="form-box-item">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item
            label="商品主图"
            required
            class="form-box-item"
            prop="image"
          >
            <logo-upload
              :file-list="images"
              :show-file-list="true"
              accept="image/jpeg, image/png"
              @uploadCallback="carouselBack"
            />
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
// 引入
import config from "./config";
import productConfig from "./productConfig";
import LogoUpload from "@/components/FileUpload";
import TinymceEditor from "@/components/Tinymce";
import {
  getgroupList,
  getTagCategoryAll,
  getgradeList,
  getRegionList,
} from "@/api/user/index";
import { rangeCanJoinUserList, rangeHasJoinUserList } from "@/api/index";
// import Template from '../raffle/template.vue';
export default {
  name: "detail",
  props: ["detailTitle"],
  components: {
    config,
    productConfig,
    LogoUpload,
    TinymceEditor,
  },

  data() {
    return {
      drawer: true,
      detailtitle: "",
      activeName: "first",
      status: [
        { name: "过期", id: -1 },
        { name: "开启", id: 1 },
        { name: "进行中", id: 2 },
        { name: "关闭", id: 3 },
      ],
      regions: [
        { name: "全国", id: "-1" },
        { name: "武汉", id: "1" },
        { name: "北京", id: "2" },
        { name: "郑州", id: "3" },
      ],
      groupingList: [], // 分组
      TagCategoryAll: [], // 标签
      gradeList: [], // 等级
      regionList: [], // 区域
      CanJoinUserList: [], // 满足条件的可参与用户列表
      eventsForm: {
        award_name: "", // 抽奖活动名称
        time: "",
        status: "", // 状态状态：-1过期 1开启 2进行中 3关闭
        totalPrizeRulesLimited: "",
        extraTimes: [], //额外次数
        region: [], //生效区域
        product: "",
        turntable: "6",
        prizepool: "默认奖池",
        prizeturntable: "1",
        content: "",
      },
      // 基本信息
      basic: {
        activity_name: "",
        award_name: "", // 抽奖活动名称
        start_time: "", // 开启时间
        end_time: "", // 结束时间
        status: 3, // 状态状态：-1过期 1开启 2进行中 3关闭
        user_lottery_num: 0, // 每人抽奖总次数 不填就是不限制
        user_days_lottery_num: 0, // 没人每天抽奖总次数 不填就是不限制
        is_use_cart_num: "", // 0不可使用会员卡赠送次数 >0可使用次数
        is_use_sign_num: "", // 0不可使用签到赠送次数 >0可使用次数
      },
      // 基本信息时间段
      basicTime: [],
      // 基本信息额外抽奖次数
      extraTimes: [],
      // 校验
      basicrules: {
        award_name: [
          {
            required: true,
            validator: (rule, value, callback) => {
              let req = /[^0-9a-zA-Z\u4e00-\u9fa5]/g;
              if (!value) {
                callback(new Error("请输入活动名称"));
              } else {
                if (req.test(value)) {
                  callback(new Error("活动名称中不能存在特殊字符"));
                } else {
                  callback();
                }
              }
            },
            trigger: "change",
          },
        ],
        basicTime: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (this.basicTime.length == 0) {
                return callback(new Error("请选择活动的时间段"));
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
        status: [
          {
            required: true,
            validator: (rule, value, callback) => {
              callback();
            },
            trigger: "change",
          },
        ],
        user_lottery_num: [
          {
            required: false,
            validator: (rule, value, callback) => {
              let req = /\D/g;
              if (value == "" || value == 0) {
                return callback();
              }
              if (req.test(value)) {
                callback(new Error("只能为数字,且只能为整数"));
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
        is_use_cart_num: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (this.extraTimes.includes("签到渠道")) {
                let req = /\D/g;
                if (value === "") {
                  callback(new Error("请输入额外签到次数"));
                } else {
                  if (req.test(value)) {
                    callback(new Error("额外签到次数只能为数字,且只能为整数"));
                  } else {
                    callback();
                  }
                }
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
        is_use_sign_num: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (this.extraTimes.includes("会员卡渠道")) {
                let req = /\D/g;
                if (value === "") {
                  callback(new Error("请输入额外会员卡次数"));
                } else {
                  if (req.test(value)) {
                    callback(
                      new Error("额外会员卡次数只能为数字,且只能为整数")
                    );
                  } else {
                    callback();
                  }
                }
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
      },
      // 适用范围
      range: {
        user_area: "",
        user_group: "",
        user_label: "",
        user_level: "",
        user_black: "", // 黑名单用户id
      },
      // 省市区
      region: [],
      grouping: [],
      label: [],
      grade: [],
      // 校验
      rangerules: {},
      rangeCanJoinUserSearch: {
        activity_type: 10001, // 活动类型：1=爱心助农;；2=秒杀；3=拼团；4=消费3天全返；5=送积分；6=积分转化提货券；7=好物推荐；8=邀请有礼；10001=抽奖
        remove_activity_id: "", // 需要排除的活动ID（修改活动，需要传当前活动ID）
        appoint_area_select: "", // 选择的地区ID（市ID，多个以,分开）
        appoint_level_select: "", // 选择的用户等级ID（多个以,分开）
        appoint_group_select: "", // 选择的用户分组ID（多个以,分开）
        appoint_tag_select: "", // 选择的用户标签ID（多个以,分开）
        user_black: "", // 黑名单用户ID（多个以,分开）
        page: 1,
        count: 10,
      }, //
      rangeCanJoinUserLoading: false, // 使用范围使用用户列表
      rangeCanJoinUsertotal: 0, // 使用范围使用用户列表总条数
      joinblackList: [], // 黑名单列表
      HasJoinUserList: [], // 重复用户列表
      rangeHasJoinUserTotal: 0, // 重复用户数
      //   适用范围传递的数据
      dataListConfig: [],
      loading: false,
      tablevalue: {
        all_user: 0,
        disabled_user: 0,
        repeat_user: 0,
        page: 1,
        count: 10,
        total: 3,
        dataList: [
          {
            id: 1,
            name: "qqq",
            region: "北京",
            group: "中年",
            tag: "男",
            image: "",
            status: "已参加",
          },
        ],
        minprize: "",
        maxprize: "",
      },
      dataList1: [
        {
          id: 1,
          name: "qqq",
          region: "北京",
          group: "中年",
          tag: "男",
          image: "",
          status: "已参加",
        },
        {
          id: 2,
          name: "qqq",
          region: "北京",
          group: "中年",
          tag: "男",
          image: "",
          status: "已参加",
        },
        {
          id: 3,
          name: "qqq",
          region: "北京",
          group: "中年",
          tag: "男",
          image: "",
          status: "已参加",
        },
      ],
      ifShowConfig: false,
      ConfigTitle: "",
      ifShowProductConfig: false,
      productConfigTitle: "",
      dialogFormVisible: false,
      form: {
        name: "",
        image: "",
      },
      images: [],
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      dialogtitle: "",
    };
  },
  mounted() {
    const p1 = new Promise((resolve, reject) => {
      getgroupList().then((res) => {
        if (res.code !== 200 || res.status !== 1) {
          this.$messages.error(res.msg);
          reject();
          return;
        }
        this.groupingList = res.data.list;
        resolve();
      });
    });
    const p2 = new Promise((resolve, reject) => {
      getTagCategoryAll().then((res) => {
        if (res.code !== 200 || res.status !== 1) {
          this.$messages.error(res.msg);
          reject();
          return;
        }
        this.TagCategoryAll = res.data;
        resolve();
      });
    });
    const p3 = new Promise((resolve, reject) => {
      getgradeList().then((res) => {
        if (res.code !== 200 || res.status !== 1) {
          this.$messages.error(res.msg);
          reject();
          return;
        }
        this.gradeList = res.data.list;
        resolve();
      });
    });
    const p4 = new Promise((resolve, reject) => {
      getRegionList({ level: 2 }).then((res) => {
        if (res.code !== 200 || res.status !== 1) {
          this.$messages.error(res.msg);
          reject();
          return;
        }
        this.regionList = res.data;
        resolve();
      });
    });
    const p5 = new Promise((resolve, reject) => {
      rangeCanJoinUserList(this.rangeCanJoinUserSearch).then((res) => {
        if (res.code !== 200 || res.status !== 1) {
          this.$messages.error(res.msg);
          reject();
          return;
        }
        this.CanJoinUserList = res.data.list;
        this.rangeCanJoinUsertotal = res.data.total;
        resolve();
      });
    });
    const p6 = new Promise((resolve, reject) => {
      rangeHasJoinUserList({ activity_type: 10001 }).then((res) => {
        if (res.code !== 200 || res.status !== 1) {
          this.$messages.error(res.msg);
          reject();
          return;
        }
        this.HasJoinUserList = res.data.list;
        this.rangeHasJoinUserTotal = res.data.total;
        resolve();
      });
    });
    Promise.all([p1, p2, p3, p4, p5, p6])
      .then(() => {})
      .catch(() => {});
  },
  methods: {
    // 基本信息点击下一步调用
    basic_information(formName, activeName) {
      this.activeName = activeName;
      return;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.activeName = activeName;
        } else {
          return false;
        }
      });
    },
    // 选择活动日期之后直接赋值
    basicTimeChange(val) {
      if (val.length !== 0) {
        this.basic.start_time = val[0];
        this.basic.end_time = val[1];
      } else {
        this.basic.start_time = "";
        this.basic.end_time = "";
      }
    },
    // 文本框聚焦执行
    Focus(item, str) {
      if (item[str] == 0) {
        item[str] = "";
      }
      this.$forceUpdate();
    },
    // 文本框失焦执行
    Blur(item, str) {
      if (item[str] == "") {
        item[str] = 0;
        return;
      }
      if (Number(item[str])) {
        item[str] = Number(item[str]);
      }
      this.$forceUpdate();
    },
    getRangeCanJoinUserListWay() {
      this.rangeCanJoinUserLoading = true;
      rangeCanJoinUserList(this.rangeCanJoinUserSearch).then((res) => {
        this.rangeCanJoinUserLoading = false;
        if (res.code !== 200 || res.status !== 1) {
          this.$messages.error(res.msg);
          return;
        }
        this.CanJoinUserList = res.data.list;
        this.rangeCanJoinUsertotal = res.data.total;
      });
    },
    // 下拉框选择调用
    selectChangeWay(val, name) {
      this.range[name] = val.toString();
      if (name == "user_group") {
        this.rangeCanJoinUserSearch.appoint_group_select = val.toString();
      } else if (name == "user_level") {
        this.rangeCanJoinUserSearch.appoint_level_select = val.toString();
      } else if (name == "user_label") {
        this.rangeCanJoinUserSearch.appoint_tag_select = val.toString();
      }

      this.getRangeCanJoinUserListWay();
    },
    // 选择区域调用
    regionChangeWay(val) {
      console.log(JSON.stringify(val));
    },
    //tabs页面切换
    handleClick(tab, event) {
      console.log(tab, event);
    },
    // 关闭抽屉
    closedinvitation() {
      this.$parent.closedetail();
    },
    //打开抽屉
    addConfig(title) {
      this.ifShowConfig = true;
      this.$nextTick(() => {
        if (title == "黑名单") {
          this.dataListConfig = this.joinblackList;
        } else if (title == "重复对象") {
          this.dataListConfig = this.HasJoinUserList;
        }
        console.log(this.dataListConfig);
        this.ConfigTitle = title;
      });
    },
    addProductConfig(title) {
      this.productConfigTitle = title;
      this.ifShowProductConfig = true;
    },
    //关闭子抽屉
    closeConfig() {
      this.ifShowConfig = false;
      this.ifShowProductConfig = false;
    },
    gettable() {
      this.loading = true;
      this.tablevalue.dataList = this.dataList1;
      this.loading = false;
    },
    // 上传活动轮播的回调
    carouselBack(files) {
      this.images = files;
      var arr = [];
      this.images.forEach((item) => {
        arr.push(item.url);
      });
      this.form.image = arr.toString();
    },
    //加入黑名单
    joinblack(row) {
      this.$confirm("确定要将该用户添加到黑名单吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.joinblackList.push(row);
          var arr = [];
          this.joinblackList.forEach((item) => {
            arr.push(item.id);
          });
          this.rangeCanJoinUserSearch.user_black = arr.toString();
          this.getRangeCanJoinUserListWay();
          this.$message({
            type: "success",
            message: "添加成功!",
          });
        })
        .catch(() => {});
    },
  },
};
</script>
<style lang="scss">
.drawer-layout {
  /*1.显示滚动条：当内容超出容器的时候，可以拖动：*/
  .el-drawer__body {
    overflow: auto;
  }

  /*2.隐藏滚动条，太丑了*/
  .el-drawer__container ::-webkit-scrollbar {
    display: none;
  }

  .el-drawer__header {
    background-color: #409eff;
    color: #ffffff;
    padding: 10px 20px;
    margin-bottom: 10px;
  }

  .el-tabs--card {
    height: calc(100vh - 110px);
    /* overflow-y: auto; */
  }

  .el-tab-pane {
    height: calc(100vh - 110px);
    overflow-y: auto;
  }

  .el-tabs__header {
    padding-left: 50px;
    margin: 0;
  }

  .el-tabs__item {
    padding: 0 40px;
  }

  .el-tabs__nav-wrap::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background-color: #ffffff;
    z-index: 1;
  }

  .el-alert--warning.is-light .el-alert__description {
    color: #c77b04;
    font-size: 14px;
  }

  .form-box-item {
    .el-form-item__label {
      font-size: 14px;
      font-weight: 500;
      // width: 96px;
    }

    .el-input {
      width: 250px;
    }
  }
}
</style>
<style lang="scss" scoped>
.blockquote-box {
  border-left: 4px solid #409eff;
  padding-left: 16px;
  margin: 16px 0;
  height: 40px;
  line-height: 40px;
  background: #fafafa;
  font-size: 16px;
}

.form-box {
  margin: 0 20px;

  .form-box-item {
    padding-bottom: 10px;
    padding-right: 20px;
    font-size: 12px;
    color: #4c4c4c;

    .form-tip {
      font-size: 12px;
      color: #4c4c4c;

      .tip-key {
        font-weight: bold;
        text-decoration: underline;
      }
    }

    .form-product {
      display: flex;
      font-size: 12px;
      color: #ee3737;
    }

    .Instructions {
      background: #f6f6f6;
      border-radius: 4px;
      padding: 10px;
    }
  }

  .table-top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;

    .table-top-left {
      display: flex;

      div {
        margin-right: 20px;
      }
    }

    .table-top-right {
      display: flex;

      div {
        margin-left: 20px;
      }
    }
  }

  .table-num {
    margin-left: 5px;
    background: #f0f0f0;
    width: 35px;
    border-radius: 5px;
  }
}

.button-box {
  margin-left: 30px;
  margin-bottom: 20px;

  .next-button {
    background-color: #eeeeee;
    color: #4c4c4c;
    height: 30px;
  }
}
</style>